<template>
    <view>
        <!-- components/priceCalendar/index.wxml -->
        <van-popup :show="isShowPriceClone" position="bottom" :round="true" @close="onClose">
            <view style="height: 1100rpx">
                <view class="title_container">
                    <view class="title_row">
                        <text>选择日期</text>
                        <van-icon
                            style="position: absolute; top: 0; bottom: 0; right: 32rpx"
                            class-prefix="iconfont"
                            name="daohangcha"
                            size="28rpx"
                            color="#999999"
                            @tap.native="onCloseFun"
                        ></van-icon>
                    </view>
                    <view class="week_row">
                        <view class="week" :style="'color: ' + (item == '六' || item == '日' ? '#FF950A' : '#333333') + ';'" v-for="(item, index) in week" :key="index">
                            {{ item }}
                        </view>
                    </view>
                </view>

                <scroll-view class="page_content flex_fill" :scroll-y="true">
                    <view class="calendar">
                        <view v-for="(outer, index) in dateList" :key="index">
                            <view class="month">{{ outer.year }}年{{ outer.month }}月</view>

                            <view class="cal_content">
                                <view
                                    @tap="onDateTap"
                                    :data-outer="outer"
                                    :data-inner="inner"
                                    class="cal_item"
                                    :style="'opacity:' + (!inner || inner.disable ? '0.4' : '1') + ';'"
                                    v-for="(inner, index1) in outer.days"
                                    :key="index1"
                                >
                                    <block v-if="inner">
                                        <view class="day" :style="'color: ' + (inner.idx == selectedIndexClone ? 'white' : '#333333') + ';'">
                                            {{ inner.day }}
                                        </view>
                                        <view v-if="inner.price != 0" class="price" :style="'color: ' + (inner.idx == selectedIndexClone ? 'white' : '#FF6700') + ';'">
                                            <text v-if="inner.price == -1">关闭</text>
                                            <text v-else>￥{{ inner.price / 100 }}</text>
                                        </view>
                                    </block>

                                    <block v-else></block>

                                    <view v-if="inner.idx == selectedIndexClone" class="item_selected_bg"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// components/priceCalendar/index.js
export default {
    data() {
        return {
            week: ['日', '一', '二', '三', '四', '五', '六'],
            dateList: [],

            outer: {
                year: '',
                month: '',
                days: []
            },

            inner: {
                disable: '',
                idx: '',
                day: '',
                price: 0
            },

            selectedIndexClone: 0,
            isShowPriceClone: false
        };
    },

    mixins: [require('miniprogram-computed').behavior],

    props: {
        priceList: {
            type: Array,
            default: () => []
        },
        selectedIndex: {
            type: Number,
            default: 0
        },
        isShowPrice: {
            type: Boolean,
            default: false
        }
    },

    watch: {
        priceList: function () {
            let startDate;
            if (this.priceList.length == 0) {
                startDate = new Date();
            } else {
                startDate = new Date(this.priceList[0].time);
            }
            let startYear = startDate.getFullYear();
            let startMonth = startDate.getMonth() + 1;

            // 获取当前最近的月份
            let dateList = [];
            for (let index = 0; index < 3; index++) {
                let year = startYear;
                let month = startMonth + index;
                // 计算月份的年月值
                if (month > 12) {
                    year = startYear + 1;
                    month = month - 12;
                }
                // 计算一个月内的天数
                let monthTotalDay = this.mGetDate(year, month);
                // 计算一个月内第一天是周几
                var monthFirstDay = new Date(year, month - 1, 1);
                let weekDay = monthFirstDay.getDay();

                // 补齐到周日
                let days = [];
                for (let index = 0; index < weekDay; index++) {
                    days.push(undefined);
                }
                // 添加正常日期
                for (let index = 0; index < monthTotalDay; index++) {
                    // 在原价格列表中的位置
                    let idx = NaN;
                    let day = index + 1;
                    var price = 0;
                    var disable = true;

                    // 计算当前是否能匹配价格（被禁用）
                    for (let j = 0; j < this.priceList.length; j++) {
                        const priceItem = this.priceList[j];
                        let tempDate = new Date(priceItem.time);
                        let y = tempDate.getFullYear();
                        let m = tempDate.getMonth() + 1;
                        let d = tempDate.getDate();
                        if (y == year && m == month && d == day) {
                            idx = j;
                            price = priceItem.opening ? priceItem.price : -1;
                            disable = !priceItem.opening;
                        }
                    }
                    days.push({
                        // 原数组索引
                        idx: idx,
                        day: day,
                        price: price,
                        disable: disable
                    });
                }
                // 生成日期列表
                dateList.push({
                    year: year,
                    month: month,
                    days: days
                });
            }
            this.setData({
                dateList: dateList
            });
            // console.log(this.data.dateList);
        },

        selectedIndex: {
            handler: function (newVal, oldVal) {
                this.selectedIndexClone = newVal;
            },

            immediate: true
        },

        isShowPrice: {
            handler: function (newVal, oldVal) {
                this.isShowPriceClone = newVal;
            },

            immediate: true
        }
    },

    methods: {
        /**
         * 计算某月的天数
         * @param {*} year
         * @param {*} month
         */
        mGetDate(year, month) {
            var d = new Date(year, month, 0);
            return d.getDate();
        },

        // 日历选择
        onDateTap(e) {
            let year = e.currentTarget.dataset.outer.year;
            let month = e.currentTarget.dataset.outer.month;
            let inner = e.currentTarget.dataset.inner;

            // 被禁用的内容不触发点击事件
            if (inner.disable) {
                return;
            }
            this.setData({
                selectedIndexClone: inner.idx
            });
            this.$emit('onChooseDate', {
                detail: {
                    selectedIndex: inner.idx,
                    year: year,
                    month: month,
                    date: inner.day
                }
            });
            // 关闭
            this.onCloseFun();
        },

        onCloseFun(e) {
            this.setData({
                isShowPriceClone: false
            });
        },

        onClose() {
            console.log('占位：函数 onClose 未声明');
        }
    },

    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
